import React, { useState } from "react";
import { Table, Divider, Radio, DatePicker, Space, TreeSelect, Input } from "antd";
const { RangePicker } = DatePicker;
const { Search } = Input;

export default function AppointmentView() {
  const data: any = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
    });
  }
  const columns = [
    {
      title: "患者姓名",
      dataIndex: "name",
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: "就诊卡号",
      dataIndex: "card",
    },
    {
      title: "身份证号",
      dataIndex: "IDnumber",
    },
    {
      title: "手机号码",
      dataIndex: "phone",
    },
    {
      title: "挂号科室",
      dataIndex: "department",
    },
    {
      title: "挂号类型",
      dataIndex: "type",
    },
    {
      title: "挂号费",
      dataIndex: "cost",
    },
    {
      title: "挂号状态",
      dataIndex: "status",
    },
    {
      title: "就诊日期",
      dataIndex: "data",
    },
    {
      title: "候诊时间",
      dataIndex: "waitingtime",
    },
    {
      title: "预约时间",
      dataIndex: "ordertime",
    },
    {
      title: "操作",
      dataIndex: "operation",
    },
  ];
  const treeData = [
    {
      title: "Node1",
      value: "0-0",
      children: [
        {
          title: "Child Node1",
          value: "0-0-1",
        },
        {
          title: "Child Node2",
          value: "0-0-2",
        },
      ],
    },
    {
      title: "Node2",
      value: "0-1",
    },
  ];
  const [value1, setvalue1] = useState(undefined);
  let onChange1 = (value: any) => {
    setvalue1(value);
  };
  const rowSelection = {
    getCheckboxProps: (record: any) => ({
      name: record.name,
    }),
  };
  const [value, setValue] = React.useState(1);
  const onChange = (e: any) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };
  const onSearch = (value: any) => console.log(value);
  return (
    <div>
      <Radio.Group onChange={onChange} value={value}>
        <Radio value={1}>全部</Radio>
        <Radio value={2}>待就诊</Radio>
        <Radio value={3}>已就诊</Radio>
        <Radio value={4}>已取消</Radio>
      </Radio.Group>
      <RangePicker showTime style={{ width: "300px", marginLeft: "20px" }} />
      <TreeSelect
        style={{ width: "200px", marginLeft: "20px" }}
        value={value1}
        dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
        treeData={treeData}
        placeholder="请选择科室"
        treeDefaultExpandAll
        onChange={onChange1}
      />
      <Search placeholder="请输入医生/病人名字" onSearch={onSearch} enterButton style={{ width: "350px", marginLeft: "20px" }} />
      <Divider />
      <Table
        rowSelection={{
          type: "checkbox",
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
}
